<template>
  <div class="container">
    <div style="">
      <div class="card_nd_title">
        <span>服务前后对比</span>
        <div class="line" style="width:96px;"></div>
      </div>
      <div class="content_box">
        <div style="width: 47%;">
          <p>糖尿病并发症服务前</p>
          <div
            class="card_content"
            v-if="archiveFirst.nephropathyText !== null && archiveFirst.nephropathyText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病肾病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.nephropathyDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12">{{ archiveFirst.nephropathyData.split(',')[0] }}</a-col>
                <a-col class="item" :span="12">{{ archiveFirst.nephropathyData.split(',')[1] }}</a-col>
                <a-col class="item" :span="12">{{ archiveFirst.nephropathyData.split(',')[2] }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.hhsText !== null && archiveFirst.hhsText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病高渗综合症</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.hhsDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12">随机血糖：{{ archiveFirst.hhsRandomSugar }}</a-col>
                <a-col class="item" :span="12">电解质（Na+）：{{ archiveFirst.hhsNa }}</a-col>
                <a-col class="item" :span="12">电解质（K+）：{{ archiveFirst.hhsK }}</a-col>
                <a-col class="item" :span="12">血浆渗透压：{{ archiveFirst.hhsOpp }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.peripheralText !== null && archiveFirst.peripheralText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病周围神经病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.peripheralDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12" v-for="item in archiveFirst.peripheralData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.retinopathyText !== null && archiveFirst.retinopathyText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病视网膜病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.retinopathyDate }}</div>
            <div>
              <a-row>
                <a-col class="item" v-for="item in report.retinopathyData.split(';')" :key="item" :span="24">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.digestiveText !== null && archiveFirst.digestiveText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">消化系统自主神经病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.digestiveDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="24" v-for="item in archiveFirst.digestiveData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.cardiovascularText !== null && archiveFirst.cardiovascularText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">心血管自主神经病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.cardiovascularDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="24" v-for="item in archiveFirst.cardiovascularData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.otherneuropathyText !== null && archiveFirst.otherneuropathyText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">其他自主神经病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.otherneuropathyDate }}</div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="12"
                  v-for="item in archiveFirst.otherneuropathyItem.split(';')"
                  :key="item"
                  >{{ item }}</a-col
                >
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.genitourinaryText !== null && archiveFirst.genitourinaryText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">泌尿生殖系统自主神经病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.genitourinaryDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12" v-for="item in archiveFirst.genitourinaryData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.dfootText !== null && archiveFirst.dfootText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病足</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.dfootDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12" v-for="item in archiveFirst.dfootData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.extremityText !== null && archiveFirst.extremityText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病下肢血管病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.extremityDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12" v-for="item in archiveFirst.extremityData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.dkaText !== null && archiveFirst.dkaText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">酮症酸中毒</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.dkaDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="24" v-for="item in archiveFirst.dkaData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
        </div>
        <div style="width: 47%;">
          <p>糖尿病并发症服务后</p>
          <div
            class="card_content"
            v-if="archiveSummary.nephropathyText !== null && archiveSummary.nephropathyText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病肾病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.nephropathyDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12">{{ archiveSummary.nephropathyData.split(',')[0] }}</a-col>
                <a-col class="item" :span="12">{{ archiveSummary.nephropathyData.split(',')[1] }}</a-col>
                <a-col class="item" :span="12">{{ archiveSummary.nephropathyData.split(',')[2] }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveSummary.hhsText !== null && archiveSummary.hhsText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病高渗综合症</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.hhsDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12">随机血糖：{{ archiveSummary.hhsRandomSugar }}</a-col>
                <a-col class="item" :span="12">电解质（Na+）：{{ archiveSummary.hhsNa }}</a-col>
                <a-col class="item" :span="12">电解质（K+）：{{ archiveSummary.hhsK }}</a-col>
                <a-col class="item" :span="12">血浆渗透压：{{ archiveSummary.hhsOpp }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.peripheralText !== null && archiveSummary.peripheralText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病周围神经病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.peripheralDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12" v-for="item in archiveSummary.peripheralData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.retinopathyText !== null && archiveSummary.retinopathyText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病视网膜病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.retinopathyDate }}</div>
            <div>
              <a-row>
                <a-col class="item" v-for="item in report.retinopathyData.split(';')" :key="item" :span="24">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.digestiveText !== null && archiveSummary.digestiveText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">消化系统自主神经病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.digestiveDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="24" v-for="item in archiveSummary.digestiveData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.cardiovascularText !== null && archiveSummary.cardiovascularText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">心血管自主神经病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.cardiovascularDate }}</div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-for="item in archiveSummary.cardiovascularData.split(';')"
                  :key="item"
                  >{{ item }}</a-col
                >
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.otherneuropathyText !== null && archiveSummary.otherneuropathyText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">其他自主神经病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.otherneuropathyDate }}</div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="12"
                  v-for="item in archiveSummary.otherneuropathyItem.split(';')"
                  :key="item"
                  >{{ item }}</a-col
                >
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.genitourinaryText !== null && archiveSummary.genitourinaryText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">泌尿生殖系统自主神经病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.genitourinaryDate }}</div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="12"
                  v-for="item in archiveSummary.genitourinaryData.split(';')"
                  :key="item"
                  >{{ item }}</a-col
                >
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveSummary.dfootText !== null && archiveSummary.dfootText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病足</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.dfootDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12" v-for="item in archiveSummary.dfootData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.extremityText !== null && archiveSummary.extremityText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病下肢血管病变</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.extremityDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12" v-for="item in archiveSummary.extremityData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveSummary.dkaText !== null && archiveSummary.dkaText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">酮症酸中毒</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.dkaDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="24" v-for="item in archiveSummary.dkaData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Complication',
  props: ['archiveFirst', 'archiveSummary'],
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
// /deep/ .ant-descriptions-item-label {
//   width: 25% !important;
// }
// /deep/ .ant-descriptions-item-content {
//   width: 75% !important;
// }

@media print {
  .container {
    page-break-inside: avoid;
  }
}
.container {
  padding: 50px 24px 0 24px;
}

.card_nd_title {
  margin-bottom: 30px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.content_box {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
    color: #000;
  }
}
.card_content {
  break-inside: avoid;
  // display: inline-block;
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ccc;
}
.item {
  margin-bottom: 20px;
}
</style>

